<template>
  <div class="detail-pages white-bg">
    <div class="detail-wrapper">
      <div class="detail-header">
        <h2 class="detail-title">{{ formState.name || '知识库详情' }}</h2>
        <div class="detail-actions">
          <a-button type="primary" @click="handleEdit">
            编辑
          </a-button>
          <a-button @click="handleBack">
            返回
          </a-button>
        </div>
      </div>

      <div class="detail-content">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="知识库ID">
            {{ formState.id || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="知识库名称">
            {{ formState.name || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            {{ formState.enabled ? '启用' : '禁用' }}
          </a-descriptions-item>
          <a-descriptions-item label="文档数量">
            {{ formState.document_count || 0 }} 个
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ formState.created || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="更新时间">
            {{ formState.updated || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="描述" :span="2">
            {{ formState.description || '-' }}
          </a-descriptions-item>
        </a-descriptions>

        <div class="document-section">
          <h3 class="section-title">文档列表</h3>
          <a-table
            :columns="documentColumns"
            :data-source="documentList"
            :pagination="false"
            size="small"
            :scroll="{ y: 300 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'size'">
                {{ formatFileSize(record.size) }}
              </template>
              <template v-if="column.dataIndex === 'operation'">
                <a-button type="link" size="small" @click="handleDownload(record)">
                  下载
                </a-button>
                <a-button type="link" size="small" @click="handlePreview(record)">
                  预览
                </a-button>
              </template>
            </template>
          </a-table>
        </div>

        <div class="statistics-section">
          <h3 class="section-title">统计信息</h3>
          <a-row :gutter="16">
            <a-col :span="6">
              <a-statistic title="总文档数" :value="statistics.totalDocuments" />
            </a-col>
            <a-col :span="6">
              <a-statistic title="总大小" :value="formatFileSize(statistics.totalSize)" />
            </a-col>
            <a-col :span="6">
              <a-statistic title="查询次数" :value="statistics.queryCount" />
            </a-col>
            <a-col :span="6">
              <a-statistic title="最后查询" :value="statistics.lastQuery || '-'" />
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { useGlobalStore } from '@/store/modules/global';

const router = useRouter();
const route = useRoute();
const store = useGlobalStore();

const loading = ref(false);

const formState = reactive({
  id: '',
  name: '',
  description: '',
  enabled: true,
  document_count: 0,
  created: '',
  updated: ''
});

const documentList = ref([]);

const statistics = reactive({
  totalDocuments: 0,
  totalSize: 0,
  queryCount: 0,
  lastQuery: ''
});

const documentColumns = [
  {
    title: '文档名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true
  },
  {
    title: '文件类型',
    dataIndex: 'type',
    key: 'type',
    width: 100
  },
  {
    title: '文件大小',
    dataIndex: 'size',
    key: 'size',
    width: 100
  },
  {
    title: '上传时间',
    dataIndex: 'uploaded',
    key: 'uploaded',
    width: 150
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 120,
    align: 'center'
  }
];

onMounted(() => {
  const id = route.query.id;
  if (id) {
    loadData(id);
  }
});

const loadData = async (id) => {
  try {
    loading.value = true;
    // TODO: 实现数据加载逻辑
    // 模拟数据
    Object.assign(formState, {
      id: id,
      name: '示例知识库',
      description: '这是一个示例知识库的详细描述，包含了各种类型的文档和资料。',
      enabled: true,
      document_count: 5,
      created: '2024-01-01 10:00:00',
      updated: '2024-01-15 14:30:00'
    });

    documentList.value = [
      {
        id: 1,
        name: '用户手册.pdf',
        type: 'PDF',
        size: 2048576,
        uploaded: '2024-01-01 10:00:00'
      },
      {
        id: 2,
        name: '技术文档.docx',
        type: 'Word',
        size: 1024000,
        uploaded: '2024-01-02 11:00:00'
      },
      {
        id: 3,
        name: '说明文档.txt',
        type: 'Text',
        size: 512000,
        uploaded: '2024-01-03 12:00:00'
      }
    ];

    Object.assign(statistics, {
      totalDocuments: 5,
      totalSize: 4096576,
      queryCount: 128,
      lastQuery: '2024-01-15 14:25:00'
    });
  } catch (error) {
    message.error('加载数据失败');
  } finally {
    loading.value = false;
  }
};

const handleEdit = () => {
  const id = route.query.id;
  store.setSubTitle('编辑知识库');
  router.push(`/administrator/ai-knowledge-management-option?id=${id}`);
};

const handleBack = () => {
  router.back();
};

const handleDownload = (record) => {
  // TODO: 实现文档下载逻辑
  message.info(`下载文档: ${record.name}`);
};

const handlePreview = (record) => {
  // TODO: 实现文档预览逻辑
  message.info(`预览文档: ${record.name}`);
};

const formatFileSize = (bytes) => {
  if (!bytes) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
</script>

<style lang="less" scoped>
.detail-pages {
  height: 100%;
  padding: 24px;
  overflow-y: auto;

  .detail-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;

    .detail-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #262626;
    }

    .detail-actions {
      display: flex;
      gap: 8px;
    }
  }

  .detail-content {
    padding: 0 24px 24px;
  }

  .document-section,
  .statistics-section {
    margin-top: 32px;

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #262626;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }
  }
}

:deep(.ant-descriptions-item-label) {
  font-weight: 500;
  background-color: #fafafa;
}

:deep(.ant-statistic-title) {
  font-size: 14px;
  color: #8c8c8c;
}

:deep(.ant-statistic-content) {
  font-size: 20px;
  font-weight: 600;
}
</style>